<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">资源管理</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>资源管理</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <!-- 搜索条件 -->
        <div class="layui-form toolbar">
            <form id="searchForm" onsubmit="return false;">
                资源名：<input name="resourceName" class="layui-input search-input" type="text" placeholder="输入资源名"/>&emsp;
                请求方式：
                <select name="method" lay-verify="">
                    <option value="">选择请求方式</option>
                    <option value="GET">GET</option>
                    <option value="POST">POST</option>
                    <option value="PUT">PUT</option>
                    <option value="DELETE">DELETE</option>
                </select>
                权限类型：
                <select name="authType" lay-verify="">
                    <option value="">选择类型</option>
                    <option value="1">需要登录</option>
                    <option value="2">无需鉴权</option>
                    <option value="3">需要鉴权</option>
                </select>
                <button id="resource-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索
                </button>
            </form>
        </div>
        <!-- 表格顶部操作列 -->
        <script type="text/html" id="resource-toolbar">
            <div class="layui-btn-container">
                {{# if({{refreshShow}} == true){ }}
                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="refresh"><i
                        class="layui-icon"></i>刷新资源
                </button>
                {{# } }}
            </div>
        </script>
        <table class="layui-table" id="resource-table" lay-filter="resource-table"></table>
    </div>
</div>

<script>
    layui.use(['form', 'table', 'config', 'crown'], function () {
        var table = layui.table;
        var config = layui.config;
        var layer = layui.layer;
        var crown = layui.crown;
        $('#resource-toolbar').vm({
            refreshShow: crown.hasPerm("sys:resource:refresh")
        });

        // 渲染表格
        var resourceTable = table.render({
            elem: '#resource-table',
            toolbar: '#resource-toolbar',
            url: config.serverUrl + '/resources',
            request: config.request,
            parseData: config.parseData,
            response: config.response,
            headers: {Authorization: config.getToken()},
            page: true,
            cols: [[
                {field: 'id', title: 'ID'},
                {field: 'resourceName', align: 'center', sort: true, title: '资源名称'},
                {field: 'method', align: 'center', sort: true, title: '请求方式'},
                {field: 'mapping', align: 'center', sort: true, title: '路径映射'},
                {
                    minWidth: 80, align: 'center', templet: function (d) {
                        if (d.authType == 1) {
                            return '<span class="layui-badge layui-bg-blue">需要登录</span>';
                        } else if (d.authType == 2) {
                            return '<span class="layui-badge layui-bg-green">无需鉴权</span>';
                        } else if (d.authType == 3) {
                            return '<span class="layui-badge layui-bg-red">需要鉴权</span>';
                        } else {
                            return '<span class="layui-badge layui-bg-gray">未知类型</span>';
                        }
                    }, title: '权限类型'
                },
                {field: 'perm', align: 'center', sort: true, title: '权限标识'},
                {field: 'updateTime', align: 'center', sort: true, title: '修改时间'}
            ]]
        });
        // 表格顶部操作列
        table.on('toolbar(resource-table)', function (obj) {
            if (obj.event === 'refresh') {
                crown.put('/resources', {}, function () {
                    layer.msg('刷新成功', {icon: 1});
                    resourceTable.reload('resource-table', {});
                });
            }
        });
        // 搜索按钮点击事件
        $('#resource-btn-search').click(function () {
            resourceTable.reload({where: crown.getSearchForm()});
        });
    });
</script>